<!-- -->
<template>
  <div class="login">
    <el-dialog v-model="userStore.dialogVisible" title="用户登录" width="1000" :close-on-click-modal="false" :before-close="handleClose">
      <div class="content">
        <div class="left">
          <el-form v-if="loginType === 'phone'" ref="loginRef" :model="form" :rules="rules" label-width="auto" style="max-width: 600px">
            <el-form-item prop="phone">
              <el-input v-model="form.phone" placeholder="请您输入手机号码" :prefix-icon="User" clearable />
            </el-form-item>
            <el-form-item prop="code">
              <el-input v-model="form.code" placeholder="请您输入手机验证码" :prefix-icon="Lock" clearable :disabled="!isPhone" />
            </el-form-item>
            <el-form-item>
              <el-button @click="getCode" :disabled="!isPhone || flag">
                <Countdown v-if="flag" @getFlag="getFlag"></Countdown>
                <span v-else>获取验证码</span>
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button class="btn" type="primary" :disabled="!isPhone || !isCode" @click='login'>用户登录</el-button>
            </el-form-item>
            <el-form-item class="wx-box">
              <div class="wx" @click="changeLoginType('wx')">
                <span>微信扫码登录</span>
                <svg t="1732015583746" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8283" width="32" height="32">
                  <path
                    d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                    fill="#28C445"
                    p-id="8284"></path>
                  <path
                    d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                    fill="#28C445"
                    p-id="8285"></path>
                </svg>
              </div>
            </el-form-item>
          </el-form>
          <div v-else>
            <div id="login_container"></div>
            <div class="wx" @click="changeLoginType('phone')">
              <span>手机短信验证码登录</span>
              <svg t="1732016010236" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9524" width="20" height="20">
                <path
                  d="M776.676 1010.080h-479.92c-28.332 0-51.33-22.999-51.33-51.33v-891.12c0-28.332 22.999-51.33 51.33-51.33h479.92c28.332 0 51.33 22.999 51.33 51.33v891.12c0 28.332-22.999 51.33-51.33 51.33v0zM536.576 958.751c19.073 0 34.221-15.426 34.221-34.221s-15.426-34.221-34.221-34.221-34.221 15.426-34.221 34.221 15.426 34.221 34.221 34.221v0zM776.676 118.96h-479.92v719.742h479.641v-719.742h0.279z"
                  p-id="9525"></path>
              </svg>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="top">
            <div class="item">
              <img src="@/assets/images/code_app.png" alt="" />
              <svg t="1685263287521" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2450" width="16" height="16">
                <path
                  d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                  fill="#cdcdcd"
                  p-id="2451"></path>
                <path
                  d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                  fill="#cdcdcd"
                  p-id="2452"></path>
              </svg>
              <p>微信扫一扫关注</p>
              <p>“快速预约挂号”</p>
            </div>
            <div class="item">
              <img src="@/assets/images/code_app.png" alt="" />
              <svg t="1685263287521" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2450" width="16" height="16">
                <path
                  d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                  fill="#cdcdcd"
                  p-id="2451"></path>
                <svg t="1732016010236" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9524" width="20" height="20">
                  <path
                    d="M776.676 1010.080h-479.92c-28.332 0-51.33-22.999-51.33-51.33v-891.12c0-28.332 22.999-51.33 51.33-51.33h479.92c28.332 0 51.33 22.999 51.33 51.33v891.12c0 28.332-22.999 51.33-51.33 51.33v0zM536.576 958.751c19.073 0 34.221-15.426 34.221-34.221s-15.426-34.221-34.221-34.221-34.221 15.426-34.221 34.221 15.426 34.221 34.221 34.221v0zM776.676 118.96h-479.92v719.742h479.641v-719.742h0.279z"
                    p-id="9525"></path>
                </svg>
              </svg>
              <p>扫一扫下载</p>
              <p>预约挂号”APP</p>
            </div>
          </div>
          <div class="botton">
            <p>尚医通官方指定平台</p>
            <p>快速挂号 安全放心</p>
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleClose">关闭窗口</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="Login">
import { useUserStore } from '@/stores/user'
import { computed, reactive, ref, watch } from 'vue'
let userStore = useUserStore()

import { useRouter, useRoute } from 'vue-router';
let route = useRoute()
// let router = useRouter()

import router from '@/router';


import { Lock, User } from '@element-plus/icons-vue'
import type { FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'

import { getLoginParam } from '@/api/path'

interface RuleForm {
  phone: string
  code: string
}
let flag = ref<boolean>(false)
let loginRef = ref()

//自定义校验规则:手机号码自定义校验规则
const validatorPhone = (rule: any, value: any, callBack: any) => {
  //rule:即为表单校验规则对象
  //value:即为当前文本的内容
  //callBack:回调函数
  const reg = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/
  if (reg.test(value)) {
    callBack()
  } else {
    callBack(new Error('请输入正确的手机号码格式'))
  }
}

//自定义校验规则:手机号码验证码自定义校验规则
const validatorCode = (rule: any, value: any, callBack: any) => {
  //rule:即为表单校验规则对象
  //value:即为当前文本的内容
  //callBack:回调函数
  const reg = /^\d{6}$/
  if (reg.test(value)) {
    callBack()
  } else {
    callBack(new Error('请输入正确的验证码格式'))
  }
  // if (/^\d{6}$/.test(value)) {
  //     callBack();
  //   } else {
  //     callBack(new Error("请输入正确的验证码格式"));
  //   }
}

const rules = reactive<FormRules<RuleForm>>({
  phone: [{ required: true, validator: validatorPhone, trigger: 'blur' }],
  code: [
    {
      required: true,
      validator: validatorCode,
      trigger: 'change'
    }
  ]
})

const form = reactive({
  phone: '',
  code: ''
})

//计算出当前表单元素收集的内容是否手机号码格式
let isPhone = computed(() => {
  const reg = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/
  return reg.test(form.phone)
})

let isCode = computed(() => {
  const reg = /^\d{6}$/
  return reg.test(form.code)
})

let loginType = ref('phone')
watch(
  () => loginType.value,
  val => {
    if (val === 'wx') {
      userStore.queryState()
    }
  }
)

const changeLoginType = async (type: string) => {
  loginType.value = type
  if (type === 'wx') {
    let redirect_uri = encodeURIComponent(window.location.origin+'/wxlogin')
    // let redirect_uri = window.location.origin+'wxlogin'
    try {
      await userStore.getLoginParams(redirect_uri)
      console.log(userStore.loginParams);
      let loginParams: any = userStore.loginParams
      // @ts-ignore
      new WxLogin({
        self_redirect:true,
        id:"login_container", 
        appid: loginParams.appid, 
        scope: "snsapi_login", 
        redirect_uri: loginParams.redirectUri,
        state: loginParams.state,
        style: "balck",
        href: ""
      });
    } catch (error) {
    }
    //发请求获取微信扫码二维码需要参数
    //咱们在想硅谷学校的服务器发请求,获取微信扫码登录页面参数
    //还需要携带一个参数:告诉学校服务器用户授权成功以后重定向项目某一个页面
    // let redirect_URL = encodeURIComponent(window.location.origin + "/wxlogin");
    // let result = await getLoginParam(redirect_URL);
    // console.log(result);
    
    // //生成微信扫码登录二维码页面
    // //@ts-ignore
    // new WxLogin({
    //   self_redirect: true, //true:手机点击确认登录后可以在 iframe 内跳转到 redirect_uri
    //   id: "login_container", //显示二维码容器设置
    //   appid: result.data.appid, //应用位置标识appid
    //   scope: "snsapi_login", //当前微信扫码登录页面已经授权了
    //   redirect_uri: result.data.redirectUri, //填写授权回调域路径,就是用户授权成功以后，微信服务器向公司后台推送code地址
    //   state: result.data.state, //state就是学校服务器重定向的地址携带用户信息
    //   style: "black",
    //   href: "",
    // });
    
  }
}

const handleClose = () => {
  // userStore.dialogVisible = false
  // userStore.$patch({
  //   dialogVisible: false
  // })
  userStore.changeDialog('close')
  if (loginRef.value) {
    loginRef.value.resetFields()
  } else {
    loginType.value = 'phone'
    console.log(loginType.value);
  }
}

const getCode = async () => {
  // let res:any = await getphoneCode(form.phone)
  // if (res.code === 200) {
  //   form.code = res.data
  // }
  flag.value = true
  try {
    await userStore.getCode(form.phone)
    form.code = userStore.code
  } catch (error) {
    ElMessage({
      type: 'error',
      message: (error as Error).message
    })
  }
}

const login = async () => {
  try {
    await userStore.LoginFun(form)
    userStore.changeDialog('close')
    //获取url的query参数
    let redirect = route.query.redirect
    console.log(redirect, 'redirect----------');
    if (redirect) {
      router.push(redirect as string)
    } else {
      router.push('/home')
    }
    
  } catch (error) {
    console.log(error);
    
  }
  
}

const getFlag = (val: boolean) => {
  flag.value = val
}
</script>

<style lang="scss" scoped>
.login {
  .content {
    display: flex;
    .left {
      width: 49%;
      border: 1px solid #ccc;
      padding: 20px;
      padding-bottom: 0;
      box-sizing: border-box;
      :deep(.el-input) {
        width: 100% !important;
      }
      .btn {
        width: 100% !important;
        cursor: pointer;
      }
      .wx-box {
        :deep(.el-form-item__content) {
          display: flex;
          justify-content: center;
        }
      }
      .wx {
        // width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        margin-bottom: 10px;
      }
      #login_container {
        display: flex;
        justify-content: center;
      }
    }
    .right {
      width: 49%;
      .top {
        display: flex;
        justify-content: space-evenly;
        .item {
          display: flex;
          flex-direction: column;
          align-items: center;
          img {
            width: 130px;
          }
        }
      }
      .botton {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        p {
          margin: 6px 0;
          font-size: 20px;
          font-weight: bold;
        }
      }
    }
  }
}
</style>
